<template>
  <div class="site-classification-table">
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="false"
      bordered
      :scroll="{ y: 500 }"
      class="w-[440px] min-h-[200px]"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'sourceClassification'">
          <span>{{ record.origin_category }}</span>
          <span v-if="record.origin_sub_category">{{ '/' + record.origin_sub_category }}</span>
        </template>
        <template v-if="column.dataIndex === 'siteClassification'">
          <SiteClassificationSelect
            ref="siteClassificationSelect"
            v-model:value="record.selectIds"
            @change="(value, selectedOptions) => siteClassificationSelectChange(value, selectedOptions, record)"
            v-if="isSelect"
          />
          <span v-else class="divider">—— / ——</span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup name="SiteClassificationTable">
import SiteClassificationSelect from './components/SiteClassificationCascader.vue'
import { SITE_CLASSIFICATION } from '@/stores/modules/collect-manage/select-data-source'
import type {
  SiteClassificationItemType,
  SiteClassificationType
} from '@/stores/modules/collect-manage/select-data-source'
import type { CollectFormBindType } from '../../public-type'
import { ref, toRefs } from 'vue'

// props
type Props = { data: CollectFormBindType[]; isSelect: boolean }
const props = defineProps<Props>()
const { data, isSelect } = toRefs(props)

// table
const columns = [
  {
    title: '源分类',
    dataIndex: 'sourceClassification'
  },
  {
    title: '站点分类',
    dataIndex: 'siteClassification'
  }
]

type IdsType = string[]
const siteClassificationSelect = ref()
// 设置到 siteClassificationTableData 对应字段 (site_category, site_category_id, site_sub_category, site_sub_category_id)
const siteClassificationSelectChange = (
  value: IdsType,
  selectedOptions: SiteClassificationItemType,
  record: CollectFormBindType
) => {
  // 获取源分类中 对应 selectIds 的数据
  const arrList = siteClassificationSelect.value.findConformingData(value)
  console.log('arrList: ', arrList)

  record.site_category = arrList[0]?.name ?? undefined
  record.site_category_id = arrList[0]?.id ?? undefined
  if (!record.site_category && !record.site_category_id) {
    record.site_sub_category = undefined
    record.site_sub_category_id = undefined
  }
  if (arrList.length === 2) {
    record.site_sub_category = arrList[1]?.name ?? undefined
    record.site_sub_category_id = arrList[1]?.id ?? undefined
  }
}
</script>

<style lang="less" scoped>
:deep(.ant-table-body) {
  min-height: 200px;
}
:deep(.ant-table-header) {
  colgroup {
    col:last-child {
      width: 0;
    }
  }
}
:deep(.ant-table.ant-table-bordered > .ant-table-container) {
  border: 1px solid #f0f0f0;
}
:deep(.ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tbody > tr > td) {
  border: none;
}
.site-classification-table {
  :deep(.ant-table-cell) {
    padding: 8px;
  }

  .divider {
    color: #ecebeb;
  }
}
</style>
